import React from 'react'
import { ContestWrapper, Tab, TabItem, NoData } from './styled'
import NoContest from '../../assets/images/no_contest.png'
const Contest = ({data}) => {
    return (
        // 切页面
        <ContestWrapper>
            <h2>热门赛事</h2>
            <Tab>
                {
                    data.map(item => 
                    <TabItem key={item.id}>
                        <span>{item.title}</span>
                    </TabItem>)
                }
            </Tab>
            {data.length && 
                <NoData>
                    <img src={NoContest} alt="" />
                    <p>暂无赛事，看更多直播</p>
                </NoData>}
        </ContestWrapper>
    )
}

export default Contest